<template>
  <div>
    <GameSwiper
      v-for="item in gamesList"
      :key="item.id"
      :gameInfo="item"
      @changeGameType="emits('changeGameType', $event)"
    />
  </div>
</template>

<script setup lang="ts">
import GameSwiper from "./GameSwiper.vue";
import { getGameList } from "./const";

const lang: any = getCurrentPageLang("home");

const props = defineProps({
  gameTypeList: {
    type: Array as any,
    default: () => [],
  },
});

const emits = defineEmits(["changeGameType"]);

const gamesList: any = ref([]);

async function initData() {
  initGames();
}

initData();

function initGames() {
  gamesList.value = [
    {
      id: 1,
      title: lang.game_type_1,
      icon: "/images/home/gameType/1.png",
      swiperList: initSwiperData(getGameList(32, 2)),
    },
    {
      id: 2,
      title: lang.game_type_top,
      icon: "/images/home/gameType/game-top.png",
      swiperList: initSwiperData(getGameList(15, 5)),
    },
    ...props.gameTypeList
      .filter((item: any) => item.title !== lang.game_type_1)
      .map((item: any, index: number) => {
        return {
          id: item.id + 2,
          title: item.title,
          icon: item.img,
          swiperList: initSwiperData(getGameList(15, index)),
        };
      }),
  ];
}

function initSwiperData(list: any[]) {
  const result: any[] = [];
  for (let i = 0; i < list.length; i += 12) {
    result.push(list.slice(i, i + 12));
  }
  return result;
}
</script>

<style scoped lang="scss"></style>
